<template>
  <Row style="margin-bottom:50px">
    <Col span="24" class="banner">
      <div class="shutter">
        <div class="shutter-img">
          <a href="javascript:volid(0);" data-shutter-title="乐器培训" v-for="(item,index) in imgList" :keys="index">
            <img v-lazy="item" alt="#">
          </a>
          <!-- <a href="javascript:volid(0);" data-shutter-title="童星培训">
            <img v-lazy="'../assets/images/index/bg2.jpg'" alt="#">
          </a>
          <a href="javascript:volid(0);" data-shutter-title="舞蹈培训">
            <img v-lazy="'../assets/images/index/bg3.jpg'" alt="#">
          </a>
          <a href="javascript:volid(0);" data-shutter-title="口才培训">
            <img v-lazy="'../assets/images/index/bg4.jpg'" alt="#">
          </a> -->
        </div>
        <ul class="shutter-btn">
          <li class="prev"></li>
          <li class="next"></li>
        </ul>
        <div class="shutter-desc">
          <p>T11培训基地</p>
        </div>
      </div>
    </Col>
  </Row>
</template>


<script>

export default {
  data() {
    return {
      imgList:[
        require('../assets/images/index/bg1.jpg'),
        require('../assets/images/index/bg2.jpg'),
        require('../assets/images/index/bg3.jpg'),
        require('../assets/images/index/bg4.jpg'),
      ]
    };
  },
  mounted() {
    let htmlWidth =
      document.documentElement.clientWidth || document.body.clientWidth;
    $(".shutter").shutter({
      shutterW: htmlWidth, // 容器宽度
      shutterH: 700, // 容器高度
      isAutoPlay: true, // 是否自动播放
      playInterval: 3000, // 自动播放时间
      curDisplay: 3, // 当前显示页
      fullPage: true // 是否全屏展示
    });
  },
  methods: {
   
  }
};
</script>

<style lang="less">
@import "../assets/css/certify.css";
@import "../assets/css/shutter.css";
.banner {
  height: 700px;
  .shutter {
    margin: 0;
    border-radius: 0;
    width: 100%;
    height: 100% !important;
    .shutter-img {
      a {
        color: red;
        img{
          height: 700px;
        }
      }
    }
  }
}
</style>